<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="6">
              <a-form-item label="代理商名称">
                <a-input v-model="queryParam.agentName" placeholder="请输入:代理商名称" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-button style="margin-right: 8px" type="primary" @click="query">查询</a-button>
              <a-button style="margin-right: 8px" @click="reset">重置</a-button>
                <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column width="150" label="代理商名称" prop="agentName" align="center" />
        <el-table-column width="150" label="负责人姓名" prop="contactName" align="center" />
        <el-table-column width="150" label="负责人电话" prop="contactPhone" align="center" />
        <el-table-column width="150" label="省份" prop="provinceName" align="center" />
        <el-table-column width="150" label="城市" prop="cityName" align="center" />
        <el-table-column width="150" label="状态" align="center" >
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.state) === 1">激活</el-tag>
            <el-tag v-if="parseInt(scope.row.state) === 2" type="danger">冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="150" label="排序号" prop="sortOrder" align="center"/>
        <el-table-column width="150" label="创建时间" prop="createTime" align="center" />
        <el-table-column width="150" label="更新时间" prop="updateTime" align="center" />
        <el-table-column width="210" fixed="right" align="center" label="操作" >
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
            <el-link v-if="parseInt(scope.row.state) === 2"
              :underline="false" style="margin-left:10px;" type="success" @click="handleStatus(scope.row)">激活</el-link>
            <el-link v-if="parseInt(scope.row.state) === 1"
              :underline="false" style="margin-left:10px;" type="danger" @click="handleStatus(scope.row)">冻结</el-link>
          </template>
        </el-table-column>
      </el-table>
      
      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination
          :current-page="queryParam.page"
          :page-size="queryParam.limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <a-modal :title="modal.title" :visible="modal.visible"
      maskClosable width="60%" @cancel="modal.visible = false" @ok="handleOk">
      <a-form :form="modal.form" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
        
        <a-form-item label="代理商类型">
          <a-select v-model="modal.form.state" placeholder="请选择:代理商类型">
            <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="代理商名称">
          <a-input v-model="modal.form.agentName" placeholder="请输入:代理商名称" />
        </a-form-item>
        
        <a-form-item label="负责人姓名">
          <a-input v-model="modal.form.contactName" placeholder="请输入:负责人姓名" />
        </a-form-item>
        
        <a-form-item label="负责人电话">
          <a-input v-model="modal.form.contactPhone" :disabled="modal.form.id != null" placeholder="请输入:负责人电话" />
        </a-form-item>
        
        <a-form-item label="区域">
          <el-cascader
            v-model="modal.form.city"
            :options="areaData"
            :props="{value: 'id',label: 'name',children: 'children',emitPath: false}"
            :show-all-levels="false"
            filterable
            size="medium"></el-cascader>
        </a-form-item>
        
        <a-form-item label="地址">
          <a-textarea
            v-model="modal.form.address"
            :auto-size="{ minRows: 2, maxRows: 6 }"
            placeholder="请输入:地址" />
        </a-form-item>
        
        <a-form-item label="状态">
          <a-select v-model="modal.form.state" placeholder="请选择:状态">
            <a-select-option v-for="(item,index) in stateList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="排序号">
          <a-input v-model="modal.form.sortOrder" placeholder="请输入:排序号" />
        </a-form-item>
        
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  listByPage,
  add,
  update,
  active,
  frozen
} from '@/api/agent'
import {
  getTreeArea
} from '@/api/contentCenter'
import api from '@/api/banner'
import WangEditor from '@/components/Editor/WangEditor.vue'

const baseApi = process.env.VUE_APP_API_BASE_URL

export default {
  name: 'Index',
  data () {
    return {
      stateList: [
        {value: 1, label: '激活'}, 
        {value: 2, label: '冻结'}
      ],
      typeList: [
        {value: 1, label: '企业'}, 
        {value: 2, label: '个人'}
      ],
      queryParam: {
        page: 1,
        limit: 20
      },
      total: 0,
      modal: {
        visible: false,
        title: '',
        form: {}
      },
      tableData: [],
      areaData: []
    }
  },
  mounted () {
    this.getTable()
  },
  methods: {
    deleteChildren (arr) {
      const list = arr
      for (let i = list.length; i--; i > 0) {
        if (list[i].children) {
          if (list[i].children.length) {
            this.deleteChildren(list[i].children)
          } else {
            delete list[i].children
          }
        }
      }
      return arr
    },
    
    getTreeArea () {
      getTreeArea().then(res => {
        this.areaData = this.deleteChildren(res.data)
      }).catch(() => {})
    },

    query () {
      this.queryParam.page = 1
      this.getTable()
    },
    reset () {
      this.queryParam = {
        page: 1,
        limit: 20
      }
      this.getTable()
    },
    handleSizeChange (val) {
      this.queryParam.limit = val
      this.getTable()
    },
    handleCurrentChange (val) {
      this.queryParam.page = val
      this.getTable()
    },
    handleStatus (record) {
      this.$confirm(`您确定要${record.state === 1 ? '冻结' : '激活'}吗？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        ids.push(record.id);
        if (record.state === 1) {
          frozen(ids).then(() => {
            this.$message.success('冻结成功')
            this.getTable()
          }).catch(() => {})
        } else {
          active(ids).then(() => {
            this.$message.success('激活成功')
            this.queryParam.page = 1
            this.getTable()
          }).catch(() => {})
        }
      })
    },
    getTable () {
      listByPage(this.queryParam).then(res => {
        this.tableData = res.data.records
        this.total = parseInt(res.data.total)
      }).catch(() => {})
    },

    handleOk () {
      if (this.modal.form.id) {
        update({ ...this.modal.form }).then(res => {
          this.$message.success(res.msg)
          this.modal.form = {}
          this.modal.visible = false
          this.queryParam.page = 1
          this.getTable()
        }).catch(() => {})
      } else {
        add({ ...this.modal.form }).then(res => {
          this.$message.success(res.msg)
          this.modal.form = {}
          this.modal.visible = false
          this.queryParam.page = 1
          this.getTable()
        }).catch(() => {})
      }
    },
    handleAdd () {
      this.modal.form = {
        agentName: '',
        type: 1,
        contactName: '',
        contactPhone: '',
        address: '',
        city: '',
        sortOrder: '100',
        state: 1
      }
      this.modal.visible = true
      this.modal.title = '新增'
      this.getTreeArea()
    },
    handleEdit (record) {
      const data = JSON.parse(JSON.stringify(record))
      this.modal.form = {
        agentName: data.agentName,
        type: data.type,
        contactName: data.contactName,
        sortOrder: data.sortOrder,
        contactPhone: data.contactPhone,
        state: data.state,
        address: data.address,
        city: data.city,
        id: data.id
      }
      this.modal.visible = true
      this.modal.title = '编辑'
      this.getTreeArea()
    }
    
  }
}
</script>

<style lang="less" scoped>
.view-video {
  position: relative;

  .close {
    position: absolute;
    right: 15px;
    top: 0;
    cursor: pointer;
  }
}

/deep/.ant-modal-body {
  max-height: calc(80vh - 150px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}
</style>
